<template>
  <div class="common-page">
    <div class="header f-r a-c j-b">
      <div class="title">
        修改密码
      </div>
      <el-button @click="onPageBack">返回</el-button>
    </div>
    <SubmitForm
      :rule-form="ruleForm"
      :rules="rules"
      :form-list="formList"
      @save="onSave"
    />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { http } from '@/api'

export default {
  name: 'UserInfo',
  computed: {
    ...mapGetters(['userInfo'])
  },
  data() {
    return {
      ruleForm: {
        username: '',
        password: '',
        confirmPassword: ''
      },
      rules: {
        username: [{ required: true, message: '不能为空' }],
        password: [{ required: true, message: '不能为空' }],
        confirmPassword: [{ required: true, message: '不能为空' }]
      },
      formList: [
        {
          key: 'username',
          name: 'input',
          label: '用户账号',
          colSpan: 24,
          disabled: true
        },
        {
          key: 'password',
          name: 'input',
          label: '密码',
          type: 'password',
          colSpan: 24,
          disabled: false
        },
        {
          key: 'confirmPassword',
          name: 'input',
          label: '确认新密码',
          type: 'password',
          colSpan: 24,
          disabled: false
        }
      ]
    }
  },
  created() {
    this.ruleForm.username = this.userInfo.username
  },
  methods: {
    onPageBack() {
      this.$router.back()
    },
    onSave() {
      http.user.updatePassword({
        id: this.userInfo.uid,
        username: this.ruleForm.username,
        password: this.ruleForm.password,
        confirmPassword: this.ruleForm.confirmPassword
      }).then(res => {
        this.$message.success(res.msg)
      })
    }
  }
}
</script>

<style scoped lang="scss">
</style>
